<template>
	<view class="content">
		<view class="avatar" :style="{background:`url(${vuex_titleBg})`}">
			<view style="height: 134rpx;padding-top: 62rpx;padding-left: 10px;margin-bottom: 10px;">
				<image style="width: 260rpx;height: 90rpx;" src="/static/image/logo.png" mode="aspectFit" />
			</view>
			<view @click="search" class="u-search-box">
				<view class="u-search-inner">
					<u-icon name="search" color="#909399" :size="28"></u-icon>
					<text class="u-search-text">搜索商品</text>
				</view>
			</view>
		</view>
		<view style="flex: 1; overflow: scroll; display: flex;flex-direction: column;justify-content: space-between;">
			<view class="u-wrap">
				<view class="u-menu-wrap">
					<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
						:scroll-top="scrollTop">
						<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
							:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
							@tap.stop="swichMenu(item,index)">
							<text >{{item.name}}</text>
							<!-- class="u-line-1" -->
						</view>
					</scroll-view>

					<block v-for="(item,index) in tabbar" :key="index">
						<scroll-view scroll-y class="right-box" v-if="current==index" @scrolltolower="loadMore">
							<view  style="padding: 10px;background: #fff;"
								v-for="(item1, index1) in item.foods" :key="index1">
									<view v-if="item1.busType == '0'" style="display: flex;margin-bottom: 5px;" @click="jumpDetails(item1)">
										<view class="item-menu-image"  :style="{background:`url(${imgUrl})`,backgroundSize:'cover' }" style="padding:30rpx 30rpx;width: 340rpx ;height: 190rpx;">
											<view style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
												<!-- /static/image/zw.jpg -->
												<image style="width: 100%;"  :src="item1.picUrl?vuex_config.baseUrl + item1.picUrl:''" mode="aspectFit"></image>
											</view>
											
										</view>
										<view class="item-menu-name" style="display: flex;justify-content: space-between;flex-direction: column; ">
											<view class="">
												<view style="font-weight: bold;font-size: 30rpx;margin-bottom: 18rpx;">
													{{item1.cinvname}}</view>
												
												<view style="display: flex;justify-content: space-between">
													1{{item1.appUnitName}}起订
												</view>
											</view>
											
											
											<view style="display: flex;justify-content: space-between">
												<view v-if="item1.appPrice" style="color: #ffaa00;">
													￥<text style="font-size: 40rpx;"
													 	>{{ item1.appPrice}}</text>
													<text>/{{item1.appUnitName}}</text>
												</view>
												<view v-if="!item1.appPrice" style="color: #ffaa00;font-size: 34rpx;">
													暂无单价
												</view>
												<!-- position: relative;top: -6rpx; -->
												<view >
													<text @click.stop="addCart(item1)" style="color: #fff;background-color: #ffaa00; padding: 10rpx 12rpx;
													border-radius: 15px;display: inline-block; font-size: 22rpx;">立即购买></text>
												</view>
											</view>
											
										</view>
										<!-- <view class="item-menu-name">
											<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">
												{{item1.cinvname}}</view>
											
											<view style="display: flex;justify-content: space-between">
												<text
													style="background:  bisque ;padding: 5px;color: #ff874b;border-radius: 10px;">1{{item1.appUnitName}}起订</text>
													
												<view @click.stop="addCart(item1)">
													<u-icon name="plus-circle-fill" color="#00aa00" size="55"></u-icon>
												</view>
											</view>
											
											
											<view style="text-align: right;">
												<text style="color: red;">￥</text>
												<text style="color: red;font-size: 20px;">{{item1.appPrice?item1.appPrice:'暂无单价'}}</text>
												<text>/{{item1.appUnitName}}</text>
											</view>
										</view> -->
									</view>
									<view v-if="item1.busType == '1'" style="display: flex;margin-bottom: 5px;" @click="jumpDetails(item1)">
										<view class="item-menu-image"  :style="{background:`url(${imgUrl})`,backgroundSize:'cover' }" style="padding:30rpx 30rpx;width: 340rpx ;height: 190rpx;">
											<view style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
												<image style="width: 100%;"  :src="item1.proSell.picUrl?vuex_config.baseUrl + item1.proSell.picUrl:''" mode="aspectFit"></image>
											</view>
											
										</view>
										<view class="item-menu-name" style="display: flex;justify-content: space-between;flex-direction: column; ">
											<view class="">
												<view style="font-weight: bold;font-size: 30rpx;margin-bottom: 18rpx;">
													{{item1.proSell.abbName}}</view>
												
												<view style="display: flex;justify-content: space-between">
													起订量:{{item1.proSell.moq?item1.proSell.moq:'1'}}
												</view>
											</view>
											
											
											<view style="display: flex;justify-content: space-between">
												<view v-if="item1.proSell.fprice" style="color: #ffaa00;">
													￥<text style="font-size: 40rpx;"
														>{{ item1.proSell.fprice}}</text>
													<text>/{{item1.proSell.unitName}}</text>
												</view>
												<view v-if="!item1.proSell.fprice" style="color: #ffaa00;font-size: 34rpx;">
													暂无单价
												</view>
												<!-- position: relative;top: -6rpx; -->
												<view >
													<text @click.stop="addCart(item1)" style="color: #fff;background-color: #ffaa00; padding: 10rpx 12rpx;
													border-radius: 15px;display: inline-block; font-size: 22rpx;">立即购买></text>
												</view>
												
											</view>
											<text
												style="color: #aaa;text-decoration: line-through;">（原价:￥{{ item1.proSell.orgPrice?item1.proSell.orgPrice:'暂无单价' }}/{{item1.proSell.unitName}})</text>
											
										</view>										
									</view>
									<view v-if="item1.busType == '2'" style="display: flex;margin-bottom: 5px;" @click="jumpOuter(item1)">
										<view class="item-menu-image"  :style="{background:`url(${imgUrl})`,backgroundSize:'cover' }" style="padding:30rpx 30rpx;width: 340rpx ;height: 190rpx;">
											<view style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
												<image style="width: 100%;"  :src="item1.basInvOuter.picUrl?vuex_config.baseUrl + item1.basInvOuter.picUrl:''" mode="aspectFit"></image>
											</view>
											
										</view>
										<view class="item-menu-name" style="display: flex;justify-content: space-between;flex-direction: column; ">
											<view class="">
												<view style="font-weight: bold;font-size: 30rpx;margin-bottom: 18rpx;">
													{{item1.basInvOuter.invName}}</view>
											</view>
											
											
											<view style="display: flex;justify-content: flex-end">
												<view >
													<text @click.stop="jumpOuter(item1)" style="color: #fff;background-color: #ffaa00; padding: 10rpx 12rpx;
													border-radius: 15px;display: inline-block; font-size: 22rpx;">立即跳转></text>
												</view>
												
											</view>		
										</view>										
									</view>
									<view v-if="item1.busType == '3'" style="display: flex;margin-bottom: 5px;" @click="jumpDetails(item1)">
										<view class="item-menu-image"  :style="{background:`url(${imgUrl})`,backgroundSize:'cover' }" style="padding:30rpx 30rpx;width: 340rpx ;height: 190rpx;">
											<view style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
												<image style="width: 100%;"  :src="item1.salesPackage.picUrl?vuex_config.baseUrl + item1.salesPackage.picUrl:''" mode="aspectFit"></image>
											</view>
											
										</view>
										<view class="item-menu-name" style="display: flex;justify-content: space-between;flex-direction: column; ">
											<view class="">
												<view style="font-weight: bold;font-size: 30rpx;margin-bottom: 18rpx;">
													{{item1.salesPackage.title}}</view>
												
												<!-- <view style="display: flex;justify-content: space-between">
													起订量:{{item1.salesPackage.moq?item1.salesPackage.moq:'1'}}
												</view>-->
												<view style="display: flex;justify-content: space-between">
													{{ item1.salesPackage.batchType == 1 ? '首批' : '非首批' }}
												</view>
												
											</view>
											
											
											<view style="display: flex;justify-content: space-between">
												<view v-if="item1.salesPackage.fmaount" style="color: #ffaa00;">
													￥<text style="font-size: 40rpx;"
														>{{ item1.salesPackage.fmaount}}</text>
													<!-- <text>/{{item1.salesPackage.unitName}}</text> -->
												</view>
												<view v-if="!item1.salesPackage.fmaount" style="color: #ffaa00;font-size: 34rpx;">
													暂无单价
												</view>
												<!-- position: relative;top: -6rpx; -->
												<view >
													<text @click.stop="addCart(item1)" style="color: #fff;background-color: #ffaa00; padding: 10rpx 12rpx;
													border-radius: 15px;display: inline-block; font-size: 22rpx;">立即购买></text>
												</view>
												
											</view>
											<!-- <text
												style="color: #aaa;text-decoration: line-through;">（原价:￥{{ item1.proSell.orgPrice?item1.proSell.orgPrice:'暂无单价' }}/{{item1.proSell.unitName}})</text> -->
											
										</view>										
									</view>
								
							</view>
							<view v-if="!item.foods.length" style="padding: 10px;background: #fff;color: #000;height: 100%;
								display: flex;justify-content: center;align-items: center;text-align: center;opacity: 0.3">
								<view>
									<image style="width: 160rpx ;height: 160rpx;" src="/static/image/commodity.png"></image>
									<view class="">商品正在努力上架中</view>
								</view>

							</view>
							
							<view v-if="item.foods.length" class="loadmore" @click="loadMore">
								<u-loadmore :status="loadStatus"></u-loadmore>
							</view>

						</scroll-view>
					</block>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" closeable>
			<view style="background-color: #fff;padding: 10px">
				<view v-if="spData.busType == '0'">
					<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">{{spData.cinvname}}</view>
					<view style="display: flex;justify-content: space-between;">
						<view style="color: #aaa;">规格:{{spData.cinvstd?spData.cinvstd:''}}</view>
						<view style="background:  bisque ;font-size: 14px;padding: 3px;color: #ff874b;border-radius: 5px">
							1{{spData.appUnitName}}起订</view>
					</view>
					<view style="display: flex;justify-content: space-between;margin-top: 10px;">
						<view v-if="spData.appPrice" style="color: red;">
							￥<text style="font-size: 20px;">{{ spData.appPrice }}</text>
							<text>/{{spData.appUnitName}}</text>
						</view>
						<view v-if="!spData.appPrice">
							<text style="color: red;font-size: 20px;">暂无单价</text>
						</view>
						<u-number-box input-width="120" input-height="60"  v-model="spData.count" :min='1' @change="valChange"></u-number-box>
					</view>
				</view>
				<view v-if="spData.busType == '1'">
					<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">{{spData.abbName}}</view>
					<view style="display: flex;justify-content: space-between;">
						<!-- <view style="color: #aaa;">规格:{{spData.cinvstd?spData.cinvstd:''}}</view> -->
						<view
							style="background:  bisque ;font-size: 14px;padding: 3px;color: #ff874b;border-radius: 5px">
							{{spData.moq}}包起订
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;margin-top: 10px;">
						<view class="">
							<text style="color: red;font-size: 20px;">￥{{ spData.fprice?spData.fprice:'暂无单价' }}</text>
							<text>/包</text>
						</view>
						<u-number-box input-width="120" input-height="60" v-model="spData.count" :min="1" @change="valChange"></u-number-box>
					</view>
				</view>
				<view v-if="spData.busType == '3'">
					<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">{{spData.title}}</view>
					<view style="display: flex;justify-content: space-between;">
						<!-- <view style="color: #aaa;">规格:{{spData.cinvstd?spData.cinvstd:''}}</view> -->
						<view
							style="background:  bisque ;font-size: 14px;padding: 3px;color: #ff874b;border-radius: 5px">
							{{spData.moq ? spData.moq : '1'}}套起订
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;margin-top: 10px;">
						<view class="">
							<text style="color: red;font-size: 20px;">￥{{ spData.fmaount?spData.fmaount:'暂无单价' }}</text>
							<text>/套</text>
						</view>
						<u-number-box v-if="spData.batchType != 1"  input-width="120" input-height="60" v-model="spData.count" :min="1" @change="valChange"></u-number-box>
					</view>
				</view>
				
				
				<view
					style="color: red;text-align: right;border-top:1px solid #aaa ;border-bottom:1px solid #aaa ;padding: 10px;margin: 10px 0;">
					合计：
					<text style="font-size: 20px;">￥{{sumPrice}}</text>
				</view>
				<view style="text-align: right;padding: 10px 0;">
					<text @click="submit"
						style="padding: 10px;background: #00aa00;color: #fff;border-radius: 5px">加入购物车</text>
				</view>
			</view>
		</u-popup>

		<view>
				<view class="warp">
					<view class="navigation">
						<view class="left">
							<view @click="jumpCart" class="item car">
								<u-badge class="car-num" :count="vuex_cartList" type="error" :offset="[-3, -6]"></u-badge>
								<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
								<view class="text u-line-1">购物车</view>
							</view>
							<view class="item">
								<view style="font-size: 14px;color: red;">
									合计：￥{{cartTotalPrice}}
								</view>
								<view style="font-size: 14px;">
									总数量：{{cartTotalNum}}
								</view>

							</view>
						</view>
					</view>
				</view>

		</view>

	</view>

</template>

<script>
	import {
			mapState
		} from 'vuex';
	import classifyData from "@/common/classify.data.js";
	export default {
		data() {
			return {
				listArr:[],
				show: false,
				spData: {},
				sumPrice: 0,
				tabbar: [],
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				keyword: '',
				tar: {
					color: '#07A7E3',
					id: 1,
				}, //向子组件发送的值
				loadStatus: 'loadmore',
				query: {
					pageNo: 1,
					pageSize: 20
				},
				index:0,
				imgUrl:''

			}
		},
		onShow: function () {
			// 设置底部导航栏角标
			uni.setTabBarBadge({
				index: 2,
				text: this.vuex_cartList + ''
			});
			if (!this.vuex_cartList) {
				uni.removeTabBarBadge({
					index: 2
				});
			}
			this.cartNum()
			//  边框
			this.$u.api.shop.setListData({stype:'03'})
				.then(res => {
					this.imgUrl=this.vuex_config.baseUrl+res.list[0].picUrl
				});
			
			
			
			// this.current = 0
			this.$u.api.shop.invExtClsListData()
				.then(res => {
					this.tabbar = res.map(item =>{
						item.foods=[];
						return item
					})
					this.query.clsCode = res[this.current].id;
					// this.index = 0
					this.query.pageNo=1
					this.query.pageSize=20
				
					this.listData()
			
				});
				
		},
		computed: {
			...mapState(['vuex_cartList']),
			// 购物车商品总价
			cartTotalPrice() {
				// 计算list列表中所有选中商品的价格
				var sum = 0
				this.listArr.forEach(el => {
					sum = el.sumPrice  + sum
				})
				return sum
			},
			// 购物车件数
			cartTotalNum() {
				// 计算list列表中所有选中商品的价格
				var num = 0
				this.listArr.forEach(el => {
					num = num + el.iqty;
				})
				return num
			},
		},
		methods: {
			addCart(item){
				// console.log(item);
				if(item.busType == "0"){
					this.spData = item
					// this.spData.appPrice = this.spData.appPrice?this.spData.appPrice:'暂无单价'
					this.spData.count = 1
					this.sumPrice = this.spData.appPrice * 1
				}
				if(item.busType == "1"){
					this.spData = item.proSell
					this.spData.busType = item.busType
					// this.spData.fprice = this.spData.fprice ? this.spData.fprice : '暂无单价'
					this.spData.count = 1
					this.sumPrice = this.spData.fprice * 1
				}
				if(item.busType == "3"){
					

					this.spData = item.salesPackage
					this.spData.busType = item.busType
					this.spData.count = 1
					this.sumPrice = this.spData.fmaount * 1
					console.log(this.spData)
				}
				
				this.show = true;
				
				
			},
			valChange(e) {
				if(this.spData.busType == "0"){
					this.sumPrice = this.spData.appPrice * e.value
				}
				if(this.spData.busType == "1"){
					this.sumPrice = this.spData.fprice * e.value
				}
				if(this.spData.busType == "3"){
					this.sumPrice = this.spData.fmaount * e.value
				}
				
			},
			listData(item,index) {
				// 
				console.log('vuex_basCus',this.vuex_basCus)
				this.$u.api.shop.invExtListData(this.query).then(res => {
					if (!res.list || res.list.length == 0 ){
						this.loadStatus = "nomore";
						return;
					}
					res.list = res.list.map(i=>{
						i = {...i,...i.basInv}
						return i;
					})
					// this.spData.busType == "3" 如果vuex_basCus.batchType 为1 过滤掉 salesPackage.batchType 为2 的数据，并且返回的是batchPages 和 title 一致的
					// 如果vuex_basCus.batchType 为2 或者 '' 或者undefined 过滤掉 salesPackage.batchType 为1 的数据
					console.log('this.spData',this.spData)
					const busType = res.list[0]['busType']
					if(busType == '3') {
						console.log('this.vuex_basCus.batchPages',this.vuex_basCus)
						if(this.vuex_basCus.batchType == "1"){
							res.list = res.list.filter(i=>i.salesPackage && i.salesPackage.batchType && i.salesPackage.batchType != "2" && i.salesPackage.title == this.vuex_basCus.batchPages && i.busType == '3')
							console.log('res.list====1111',res.list)
						} else {
							// res.list = res.list.filter(i=>i.salesPackage && i.salesPackage.batchType && i.salesPackage.batchType != "1" && i.busType == '3')
							res.list = res.list.filter(i=>i.salesPackage && i.salesPackage.batchType && i.salesPackage.batchType != "1" && i.busType == '3')
						}
						// if(this.vuex_basCus.batchType == "2" || this.vuex_basCus.batchType == "" || this.vuex_basCus.batchType == undefined){
							
						// }
					}

					this.tabbar[this.index].foods=this.tabbar[this.index].foods.concat(res.list);
					// this.tabbar = this.tabbar.map(item=>{
					// 	return item
					// })
					this.tabbar = [...this.tabbar]
					// this.list = this.list.concat(res.list);
					this.count = res.count;
					this.query.pageNo = res.pageNo;
					this.query.pageSize = res.pageSize;
					this.loadStatus = "loadmore";
					if(res.count == this.tabbar[this.index].foods.length){
						this.loadStatus = "nomore";
					}
					
					
					// this.tabbar[this.index].foods=res.list
					// this.tabbar = [...this.tabbar]
				})
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.pageNo += 1;
					this.listData();
				}, 100);
			},
			search() {
				uni.navigateTo({
					url: '/pages/btdm/index/order/orderSearch',
				})
			},
			jumpCart() {
				// uni.navigateTo({
				// 	url: '/pages/btdm/index/cart/cart',
				// })
				uni.reLaunch({
					url: '/pages/btdm/index/cart/cart',
				})
			},
			cartNum(){
				this.$u.api.shop.cartListData({
					cusCode:this.vuex_basCus.code,
					createBy:this.vuex_user.userCode,
				})
				.then(res => {
						// let listArr = []
						// for (let key in res) {
						// 	res[key].forEach(item=>{
						// 			listArr.push(item)
						// 	})
						// }
						let arr = []
						for (let key in res) {
							res[key].forEach(item=>{
									if(item.busType == '0'){
										item.sumPrice = item.iqty * (item.shopInv.basInv.appPrice?item.shopInv.basInv.appPrice:'暂无单价')
									}else if(item.busType == '1'){
										item.sumPrice = item.iqty * (item.shopProductSell.fprice?item.shopProductSell.fprice:'暂无单价')
									}else if(item.busType == '3'){
										item.sumPrice = item.iqty * (item.fprice?item.fprice:'暂无单价')
									}
									arr.push(item)
							})
						}
						this.listArr = arr
						this.$store.commit("modifyCartList",this.listArr.length)
				});
			},
			submit() {
				// uni.navigateTo({
				// 	url: '/pages/btdm/index/order/submit',
				// })
				let that = this
				if(this.vuex_basCus.code && this.vuex_basCus.code != '00'){
					let data = {}
					if(this.spData.busType == '0'){
						data = {
							cusCode:this.vuex_basCus.code,
							busType:'0',
							busKey:this.spData.cinvcode,
							iqty:this.spData.count,
							fprice:this.spData.appPrice?this.spData.appPrice:'暂无单价',
							appUnitCode:this.spData.appUnitCode,
						}
					}
					if(this.spData.busType == '1'){
						data = {
							cusCode: this.vuex_basCus.code,
							busType: '1',
							busKey: this.spData.id,
							iqty: this.spData.count,
							fprice: this.spData.fprice ? this.spData.fprice : '暂无单价',
							appUnitCode:this.spData.basInv.appUnitCode,
						}
					}
					if(this.spData.busType == '3'){

						

						data = {
							cusCode: this.vuex_basCus.code,
							busType: '3',
							busKey: this.spData.id,
							iqty: this.spData.count,
							fprice: this.spData.fmaount ? this.spData.fmaount : '暂无单价',
							isNewCart: true,
						}

						console.log(data,'data=======');

						if(data.fprice == '暂无单价'){
							this.$u.toast('暂无单价，无法加入购物车');
							return;
						}

						// 把购物车数据带过去给 sellPackages 页面
						uni.navigateTo({
							url: '/pages/btdm/index/order/sellPackages?data=' + JSON.stringify(data),
						})
						setTimeout(() => {
							this.show = false;
						}, 500);
						return;
					}
					if(data.fprice != '暂无单价'){
						this.$u.api.shop.addToCart(data)
						.then(res => {
							
							if(res.result == 'true'){
								this.show = false;
								setTimeout(()=>{
									that.$u.toast(res.message);
								},500)
								this.cartNum()
							}else{
								this.$u.toast(res.message);
							}
								console.log(res,'=========');
							});
					}else{
						this.$u.toast('暂无单价，无法加入购物车');
					}
					
				}else{
					this.$u.toast('请先选择门店');
				}
			},
			jumpDetails(item) {
				console.log(item);
				if(item.busType == '0'){
					uni.navigateTo({
						url: '/pages/btdm/index/order/orderDetails?item=' + JSON.stringify(item),
					})
				}
				if(item.busType == '1'){
					uni.navigateTo({
						url: '/pages/btdm/index/order/sellDetails?id=' + item.sellId,
					})
				}
				if(item.busType == '3'){

					console.log(item,'item=======');

					const data = {
						cusCode: this.vuex_basCus.code,
						busType: '3',
						busKey: item.salesPackage.id,
						iqty: 1,
						fprice: item.salesPackage.fmaount ? item.salesPackage.fmaount : '暂无单价',
						isNewCart: false,
					}
					if(data.fprice == '暂无单价'){
						this.$u.toast('暂无单价，无法加入购物车');
						return;
					}

					// 把购物车数据带过去给 sellPackages 页面
					uni.navigateTo({
						url: '/pages/btdm/index/order/sellPackages?data=' + JSON.stringify(data),
					})


					// uni.navigateTo({
					// 	url: '/pages/btdm/index/order/sellPackages?id=' + item.salesPackage.id,
					// })
				}
				
			},
			jumpOuter(item) {
				console.log(item);
				wx.navigateToMiniProgram({
				  appId: item.basInvOuter.appId,
				  path: item.basInvOuter.clink	,
				})
			},
			getImg() {
				return Math.floor(Math.random() * 35);
			},
			// 点击左边的栏目切换
			async swichMenu(item,index) {
				this.tabbar[index].foods=[];
				this.query.pageNo = 0;
				console.log(item,index);
				this.query.clsCode = item.id;
				this.index = index
				await this.listData()
				
				if (index == this.current) return;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}
	/deep/ .u-icon-plus{
	    width: 120rpx !important;
	}
	/deep/ .u-icon-minus {
	    width: 120rpx !important;
	}

	.content {
		/* text-align: center; */
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;
	}

	.u-wrap {
		height: 100%;
		// flex: 1;
		/* #ifdef H5 */
		height: calc(100% - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		// background: #fff;
		padding: 30rpx 30rpx 50rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		background: #f6f6f6;
		// width: 200rpx;
		// width: 100px;
		width: 160rpx;
		height: 100%;
	}

	.u-tab-item {
		// width: 100px;
		width: 160rpx;
		padding: 10px;
		text-align: center;
		height: 60px;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		margin-left: 10px;
		width: 100%;
		// font-weight: normal;
		// font-size: 24rpx;
		// color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}


	.navigation {
		width: 100%;
		// position: fixed;
		// bottom: 96rpx;
		// z-index: 111;
		display: flex;
		justify-content: space-between;
		// margin-top: 100rpx;
		border: solid 1rpx #eee;
		background-color: #ffffff;
		padding: 16rpx 0;
		border-bottom: 1px solid #eee;


		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>